<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线oj--题目列表</title>
</head>
<style>
            /* 起手式，100%保证我们的样式设置可以不受影响 */
            *{
            /* 消除网页的默认外边距 */
            margin:0px;
            /* 消除网页的默认内边距 */
            padding:0px;
        }
        html,
        body{
            width: 100%;
            height: 100%;
        }
        .container .navbar a{
            /* 设置a标签是行内块元素，允许你设置宽度 */
            display: inline-block;
            width: 80px;
            /* 设置字体颜色 */
            color: white;
            /* 设置字体大小 */
            font-size: large;
            /* 设置文字高度和导航栏一样 */
            line-height: 50px;
            /* 去掉a标签的下划线 */
            text-decoration: none;
            /* 设置文字居中 */
            text-align: center;
        }
        .container .navbar{
            /* 设置标签的宽度 */
            width: 100%;
            /* 设置标签的高度 */
            height: 50px;
            /* 设置标签的背景颜色 */
            background-color: black;
            /* 给父级标签设置overflow,取消后续float带来的影响 */
            overflow: hidden;
        }
        /* 设置鼠标事件 */
        .container .navbar a:hover{
            background-color: green;
        }
        .container .navbar .login{
            float: right;
        }
   .container .question_list{
    padding-top: 50px;
    width: 800px;
    height: 100%;
    margin: 0px auto;
    /* question_list居中 */
    /* background-color: #ccc; */
    /* 标题文字居中 */
    text-align: center;
   }
   .container .question_list table{
    /* 表格填满question_list */
    width: 100%;
    /* 表格字体调大 */
    font-size: large;
    /* 文字样式 */
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    /* 表格的上边距 */
    margin: 50px;
    background-color:rgb(243,248,246);
   }
   .container .question_list h1{
    color: green;
   }
   .container .question_list table .item{
    width: 100px;
    height: 40px;
    font-size: large;
    font-family: 'Times New Roman', Times, serif;
   }
   .container .question_list table .item a{
    text-decoration: none;
    color: black;
   }
   .container .question_list table .item a:hover{
    color: blue;
    text-decoration: underline;
   }
   .container .footer{
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #ccc;
    margin-top: 15px;
   }
</style>
<body>
    <div class="container">
        <!-- --导航框，功能不实现-- -->
        <div class="navbar">
            <a href="/">首页</a>
            <a href="/all_question">题库</a>
            <a href="#">竞赛</a>
            <a href="#">讨论</a>
            <a href="#">求职</a>
            <a class="login" href="#">登录</a>
        </div>
        <div class="question_list">
            <h1>OnlineJudge题目列表</h1>
            <table>
                <tr>
                    <th class="item">编号</th>
                    <th class="item">标题</th>
                    <th class="item">难度</th>
                </tr>
                {{#question_list}}
                <tr>
                    <td class="item">{{number}}</td>
                    <td class="item"><a href="/question/{{number}}">{{title}}</a></td>
                    <td class="item">{{star}}</td>
                </tr>
                {{/question_list}}
            </table>
        </div>
        <div class="footer">
            <h4>@梁家文</h4>
        </div>

    </div>

</body>

</html>